<script setup lang="ts">
import {uploadFile} from '@/api'
import {PlusOutlined,CloseCircleOutlined,ZoomInOutlined} from "@ant-design/icons-vue";
import {ref, watch} from "vue";
const fileList = ref([]);
const baseImgUrl = import.meta.env.VITE_BASE_IMG_URL
const props = defineProps({
  modelValue:{
    type:String,
    default:''
  },
  limit:{
    type:Number,
    default:1
  },
  multiple:{
    type:Boolean,
    default:false
  }
})
const emits = defineEmits("update:modelValue")
watch(()=>props.modelValue,(value:string)=>{
  fileList.value = [];
  if(value&&value.length>0){
    fileList.value =   value.split(",").map(item=>{
      if(item){
        return{
          path:item,
          url:baseImgUrl+'/'+item,
          status:1,
          name:item.slice(item.lastIndexOf("/"),item.length)
        }
      }

    })
  }
  console.log(fileList.value)

})
const delFile = (index:number)=>{
  fileList.value.splice(index,1);
  let str = "";
  for (let i = 0; i <fileList.value.length ; i++) {

    if(i===fileList.value.length-1){
      str+=fileList.value[i].path
    }else {
      str+=fileList.value[i].path+','
    }
  }

  emits("update:modelValue",str)
}
const openFileSelect = ()=>{
  const fileInput =  document.createElement("input");
  fileInput.type = 'file';
  fileInput.multiple = props.multiple; // 支持多选
  fileInput.click();
  fileInput.addEventListener("change",(e:any)=>{
    const files = e.target.files;
    const arr = [];
    for (const item of files) {
      arr.push(new Promise((resolve, reject)=>{
        uploadFile(item).then(res=>{
          resolve(res.result);
        })
      }))
    }

    Promise.all(arr).then(res=>{
      console.log(res)
      const newFileList = res.map(item=>{
        return {
          path:item,
          url:baseImgUrl+'/'+item,
          status:1,
          name:item.slice(item.lastIndexOf("/")+1,item.length)
        }
      })
      fileList.value = [...fileList.value,...newFileList];

      let str = "";
      for (let i = 0; i <fileList.value.length ; i++) {

        if(i===fileList.value.length-1){
          str+=fileList.value[i].path
        }else {
          str+=fileList.value[i].path+','
        }
      }

      emits("update:modelValue",str)
    })
  })
  fileInput.remove();
}
</script>

<template>
  <div class="image-upload">
    <div class="card avatar-uploader flex alignCenter center"
    @click="openFileSelect"
         v-if="fileList.length<limit"
    >
      <plus-outlined></plus-outlined>
    </div>
    <div class="list flex warp">
      <div class="item"
           v-for="(item,index) in fileList"
           :key="item.name"
      >
        <img

            :src="item.url"
        />
        <div class="mark flex alignCenter center">
<!--          <zoom-in-outlined style="color: #fff;margin-right: 10px;font-size: 16px"/>-->
          <close-circle-outlined style="color: #fff;font-size: 16px"
          @click="delFile(index)"
          />
        </div>
      </div>

    </div>
  </div>
</template>

<style scoped lang="scss">
.image-upload {
  .avatar-uploader {
    width: 102px;
    height: 102px;
    margin-inline-end: 8px;
    margin-bottom: 8px;
    text-align: center;
    vertical-align: top;
    background-color: rgba(0, 0, 0, 0.02);
    border: 1px dashed #d9d9d9;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.3s;
    &:hover{
      border-color: #1677ff;
    }
  }
}
.list{
  .item{
    position: relative;
    margin: 5px;
    width: 102px;
    height: 102px;
    img{
      width: 100%;
      height: 100%;
    }
    .mark{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      visibility: hidden;
      background-color: rgba(79, 76, 76, 0.35);
    }
    &:hover{
      .mark{
        visibility:visible;
      }
    }
  }
}
</style>